<!doctype html>
<%@page import="com.cn.ccp.util.CCPContants"%>
<%@page contentType="text/html;charset=UTF-8"%>
<jsp:directive.page import="com.cn.ccp.bean.UserBean" />
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<html>
<f:view>
<f:loadBundle var="messages" basename="messages"></f:loadBundle>
<head>
<meta charset="utf-8">
<title><h:outputText value="#{messages['system_title']}" /></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
	<!-- styles -->
    <link href="<%=request.getContextPath()%>/css/bootstrap.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/css/custom.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="../../js/html5.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<%=request.getContextPath()%>/images/icon/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/icon/favicon.png">
    <script type="text/javascript" src='<%=request.getContextPath()%>/js/swfobject.js'></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/flexpaper_flash.js"></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/js/playFile.js"></script>
	<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
	
	<%
		String type = (String)session.getAttribute(CCPContants.FILE_TYPE);
		
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
		String url = basePath + "/tempfile/"+session.getAttribute("videoFileName");
		String courseName = (String)session.getAttribute(CCPContants.COURSE_NAME);
		String zipPath = basePath + "/tempfile/silverlight/";
		
	%>
	
	<script type="text/javascript">
		var sourseFileType = '<%=type%>';
		var url = '<%=url%>';
	
		var v_width = '<%=CCPContants.videoWidth %>';
		var v_height = '<%=CCPContants.videoHeight %>';
	
		function init(){
			var isInnerHTML = true ;
			var showHtml = "" ;
			if(sourseFileType == "swf"){
				showHtml = showSWF(url ,v_width ,v_height);
				document.getElementById("vidoe").innerHTML = showHtml;
			}else if(sourseFileType == "ogg" || sourseFileType == "ogv" || sourseFileType == "mp4" || sourseFileType == "webm"){
				showHtml = showOgg(url,sourseFileType,v_width ,v_height);	
				document.getElementById("vidoe").innerHTML = showHtml;
			}else if(sourseFileType == "flv"){
				playVideo(url,'<%=basePath%>',v_width ,v_height);
				isInnerHTML = false ;
			}else if(sourseFileType == "pdf"){
				showHtml = showPDF(url,v_width ,v_height);	
				document.getElementById("vidoe").innerHTML = showHtml;
			}else if(sourseFileType == "zip"){
				document.getElementById("vidoe").innerHTML = '<iframe name="contentsPages" id="contentsPagesIframe" src="'+url+'" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="auto" style="position:absolute;top:70px;bottom:15px;left:30px;right:30px;width:78%;height:80%;" height="100%" width="80%"></iframe>';
			}
		}
	</script>
</head>

<body class="bg-white" onload="init();" style="overflow-x:hidden;">
	 <h:form>
		<div class="row page-head">
			<h3 class="page-title">
				<i class="n-icon-selection  n-icon-black"></i><h:outputText value="#{messages['course_page_course_info']}"/>&nbsp;&gt;&nbsp;<h:outputText value="#{messages['online_page_title']}" />&nbsp;&gt;&nbsp; <i style="font-size:80%"><%=courseName%></i>
			</h3>
			<h:commandLink value="#{messages['btn_pro']}" action="#{onlineDetailAction.showCourseContent}" styleClass="btn" immediate="true" style="margin-top:-42px;float:right;margin-right:155px;" rendered="#{onlineDetailAction.strProCourseDetailId != '-1'}">
				 <f:param name="selectedCourseId" value="#{onlineDetailAction.selectCourseId}"></f:param>
				 <f:param name="courseId" value="#{onlineDetailAction.courseId}"></f:param>
				 <f:param name="curIndex" value="#{onlineDetailAction.curIndex}"></f:param>
				 <f:param name="strNextCourseDetailId" value="#{onlineDetailAction.strNextCourseDetailId}"></f:param>
				 <f:param name="courseDetailId" value="#{onlineDetailAction.strProCourseDetailId}"></f:param>
			</h:commandLink>
			<h:commandLink value="#{messages['btn_next']}" action="#{onlineDetailAction.showCourseContent}" styleClass="btn" immediate="true" style="margin-top:-42px;float:right;margin-right:80px;" rendered="#{onlineDetailAction.strNextCourseDetailId != '-1'}">
				 <f:param name="selectedCourseId" value="#{onlineDetailAction.selectCourseId}"></f:param>
				 <f:param name="courseId" value="#{onlineDetailAction.courseId}"></f:param>
				  <f:param name="curIndex" value="#{onlineDetailAction.curIndex}"></f:param>
				 <f:param name="courseDetailId" value="#{onlineDetailAction.strNextCourseDetailId}"></f:param>
				 <f:param name="strProCourseDetailId" value="#{onlineDetailAction.strProCourseDetailId}"></f:param>
			</h:commandLink>
			<h:commandLink value="#{messages['btn_back']}" action="#{onlineDetailAction.backFromContents}" styleClass="btn" immediate="true" style="margin-top:-42px;float:right;margin-right:20px;">
				 <f:param name="selectCourseId" value="#{onlineDetailAction.selectCourseId}"></f:param>
				 <f:param name="courseId" value="#{onlineDetailAction.courseId}"></f:param>
			</h:commandLink> 
		</div>
		<div style="margin-right: 20px">
				<div id="vidoe" align="center"></div>
	 	</div>
     </h:form>
	<script src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
	<script src="<%=request.getContextPath()%>/js/bootstrap.js"></script>
</body>
</f:view>
</html>
